<template>
	<div class="pos-sty">
		<div class="header-nav ff-regular">
			<!-- 自定义通知弹窗 -->
			<noticeCom ref="notice"></noticeCom>
			<div :class="scrollShow ? 'header' : 'default-header'">
				<!-- 头部banner轮播 -->
				<head-banner-com></head-banner-com>
				<div :class="scrollShow ? 'nav' : 'default-nav'">
					<div class="nav-left">
						<router-link to="/" class="logo-wrap">
							<img class="logo" alt="100buy" src="@/assets/images/logo/logo_write.png"
								v-if="!scrollShow" />
							<img class="logo" alt="100buy" src="@/assets/images/logo/logo.png" v-else />
						</router-link>
						<div class="nav-tabs">
							<!-- 首页 -->
							<router-link to="/" class="nav-item ff-regular" title="Home"
								:class="active == 'home' ? 'nav-active' : ''">
								{{ $t("header.home_page") }}
							</router-link>
							<!-- 运费估算 -->
							<router-link to="/estimation" class="nav-item ff-regular" title="Estimation"
								:class="active == 'estimation' ? 'nav-active' : ''">
								{{ $t("header.shippingEstimate") }}
							</router-link>
							<div class="nav-item ff-regular" :class="active == 'home1' ? 'nav-active' : ''">
								<Dropdown @on-click="toPage">
									<div>
										{{ $t("header.more") }}
										<Icon type="ios-arrow-down"></Icon>
									</div>
									<DropdownMenu slot="list">
										<!-- 转运订单 -->
										<DropdownItem
											v-if="firstPageSwitchMap.first_page_switch_transfer_order == 'ENABLE'"
											:title="$t('header.transshipmentOrder')" name="/transport">{{
												$t("header.transshipmentOrder") }}
										</DropdownItem>
										<!-- 帮助中心 -->
										<DropdownItem :title='$t("header.help")' name="/help">{{
											$t("header.help")
										}}</DropdownItem>
										<!-- 常见问题
										<DropdownItem :title='$t("header.common_issue")' name="/issueView">{{
											$t("header.common_issue")
										}}</DropdownItem> -->
										<!-- 新手指引 -->
										<DropdownItem :title='$t("header.common_issue")' name="/beginner-guide">{{
											$t("header.noviceGuide")
										}}</DropdownItem>
									</DropdownMenu>
								</Dropdown>
							</div>
						</div>
					</div>
					<div class="nav-right">
						<search-com v-if="homeElement"></search-com>
						<Dropdown trigger="click" class="other-column nav-language-dropdown">
							<div class="language ff-regular">
								<span>{{ userLanguage.text }}</span>
								<span>/</span>
								<span>{{ userCurrency.code }}</span>
								<Icon type="ios-arrow-down" class="lang-icon"></Icon>
							</div>
							<DropdownMenu class="fq-dropdown-menu lang-dropdown-menu" slot="list">
								<div class="select-list-wrap">
									<div class="select-list">
										<div class="select-list-item" v-for="item in langList" :key="item.text"
											@click="onUserLang(item)"
											:class="item.code == userLanguage.code ? 'select-active' : ''">
											<span>{{ item.text }}</span>
										</div>
									</div>
									<div class="select-list">
										<div class="select-list-item" v-for="item in currencyList" :key="item.text"
											@click="onUserCurrency(item)"
											:class="item.code == userCurrency.code ? 'select-active' : ''">
											<span> {{ item.code }}</span>
										</div>
									</div>
								</div>
							</DropdownMenu>
						</Dropdown>
						<div class="hand-menu-item">
							<router-link to="/user/shopping">
								<vue-ball ref="ball" :duration="400">
									<div class="cart-wrap" :class="{ 'is-heartBeat': heartBeat }"
										@animationend="transitioned">
										<span class="cart-num" v-if="cartNum > 0">{{
											cartNum > 99 ? "99+" : cartNum
										}}</span>
										<span class="menu-logo" @click="carMet">
											<img class="menu-logo" src="@/assets/images/icons/icon_shop.png" alt=""
												v-if="scrollShow" />
											<img class="menu-logo" src="@/assets/images/icons/icon_shop_w.png" alt=""
												v-else />
										</span>
									</div>
									<img slot="icon" class="cart-image" @click="carMet"
										src="@/assets/images/icons/icon_shop_w.png" alt="" />
								</vue-ball>
							</router-link>
						</div>
						<div class="uesr-info-img" v-if="userInfo">
							<Dropdown trigger="custom" :visible="selectVis" placement="bottom-end"
								transfer-class-name='dropdown-class'>
								<Badge :count="unReadNum">
									<span class="new-image" @click="handleOpen(!selectVis)">
										<img src="@/assets/images/icons/icon_msg.png" alt="" v-if="scrollShow" />
										<img src="@/assets/images/icons/icon_msg_w.png" alt="" v-else />
									</span>
								</Badge>
								<DropdownMenu slot="list">
									<DropdownItem>
										<div style="position: relative;" class="ff-regular">
											<Tabs :value="tabActive" @on-click="changeTab">
												<TabPane :label="label" name="tab1">
													<div class="empty-sty" v-if="!messageInfo">
														<img src="../../../assets/images/public/empty.png"
															class="empty-img" alt="">
													</div>
													<div class="pend-sty" v-else>
														<Collapse accordion simple v-for="item in messageInfo"
															:key="item.id">
															<Panel hide-arrow>
																<div class="list-pend">
																	<img :src="item.messageImg" class="pend-img" alt="">
																	<div class="info-content">
																		<!-- <div class="info-title">{{ item.subject }}</div> -->
																		<div class="info-desc info-title">{{
																			item.subject }}</div>
																	</div>
																	<div class="tackle-btn" @click="disposeBtn(item)">{{
																		$t("header.pend_text") }}
																		<Icon type="ios-arrow-forward" size="14" />
																	</div>
																</div>
																<div slot="content" class="text-sty">{{ item.messageText
																}}</div>
															</Panel>
														</Collapse>
													</div>
												</TabPane>
												<TabPane :label="infoText" name="tab2">
													<div class="empty-sty" v-if="!noticeList">
														<img src="../../../assets/images/public/empty.png"
															class="empty-img" alt="">
													</div>
													<div class="pend-sty" v-else>
														<Collapse accordion simple v-for="item in noticeList"
															:key="item.id">
															<Panel hide-arrow>
																<div class="list-pend">
																	<img :src="item.messageImg" class="pend-img" alt="">
																	<div class="info-content">
																		<div class="info-title">{{ item.subject }}</div>
																		<div class="info-desc">{{ item.messageText }}
																		</div>
																	</div>
																	<div></div>
																</div>
																<div slot="content" class="text-sty">{{ item.messageText
																}}</div>
															</Panel>
														</Collapse>
													</div>
													<Page v-if="noticeList.pages > 1" :total="noticeNum"
														:page-size="pagingParam.pageSize" @on-change="onPage"
														style="margin-top: 12px;" />
												</TabPane>
											</Tabs>
											<Icon type="ios-close" size="32" @click="handleOpen(!selectVis)"
												style="position: absolute;top: 0px;right: 0px;" />
										</div>
									</DropdownItem>
								</DropdownMenu>
							</Dropdown>
						</div>
						<div class="user-head-wrap" v-if="userInfo">
							<Dropdown @on-click="toPage" placement="bottom-end">
								<div class="user-head">
									<img v-if="!!userInfo.avatar" class="user-head-img" :src="userInfo.avatar" alt="" />
									<img v-else class="user-head-img" src="@/assets/images/home/top_nav_user.svg"
										alt="" />
								</div>
								<DropdownMenu slot="list">
									<div class="dropdown-user">
										<div class="user-info">
											<span class="avatar">
												<img v-if="!!userInfo.avatar" :src="userInfo.avatar" alt="" />
												<img v-else src="@/assets/images/home/top_nav_user.svg" alt="" />
											</span>
											<div class="info">
												<div class="name">{{ userInfo.userName }}</div>
												<div class="text">ID:{{ userInfo.id }}</div>
											</div>
										</div>
										<div class="balance">
											<div class="balance-left">
												<div class="label">Balance:</div>
												<div class="price">
													{{ userInfo.currencySymbol }}
													{{
														userInfo.balanceAvailable
													}}</div>
											</div>
											<div class="balance-right">
												<Button shape="circle">Recharge</Button>
											</div>
										</div>
									</div>
									<DropdownItem class="dropdown-item" name="/user/center">
										<div class="menu-item-content">
											<div class="content">
												{{
													$t("header.userCenter")
												}}
											</div>
											<div class="right">
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item" name="/user/order">
										<div class="menu-item-content">
											<div class="content">
												<span>{{ $t("header.myOrder") }}</span>
												<div v-if="Number(userReminder.orderQuantity) > 0" class="tag-num">
													{{
														userReminder.orderQuantity > 99
															? "99+"
															: userReminder.orderQuantity
													}}
												</div>
											</div>
											<div class="right">
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item" name="/user/warehouse">
										<div class="menu-item-content">
											<div class="content">
												<span>{{ $t("header.myWarehouse") }}</span>
												<div class="tag-num-text"
													v-if="Number(userReminder.warehouseQuantity) > 0">
													({{
														userReminder.warehouseQuantity > 99
															? "99+"
															: userReminder.warehouseQuantity
													}})
												</div>
											</div>
											<div class="right">
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item" name="/user/shipment">
										<div class="menu-item-content">
											<div class="content">
												<span>{{ $t("header.myPackage") }}</span>
												<div class="tag-num-text"
													v-if="Number(userReminder.expressOrderQuantity) > 0">
													({{
														userReminder.expressOrderQuantity > 99
															? "99+"
															: userReminder.expressOrderQuantity
													}})
												</div>
											</div>
											<div class="right">
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item">
										<div class="menu-item-content">
											<div class="content">
												<router-link class="link" to="/com-share" target="_blank">
													{{ $t("user.promotionAlliance") }}
												</router-link>
											</div>
											<div class="right">
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item" name="/user/assets">
										<div class="menu-item-content">
											<div class="content">
												{{ $t("header.myAssets") }}
											</div>
											<div class="right">
												<span class="dot-red"></span>
												<Icon type="ios-arrow-forward" size="14" />
											</div>
										</div>
									</DropdownItem>
									<DropdownItem class="dropdown-item" name="logout">
										{{ $t("header.logOut") }}
									</DropdownItem>
								</DropdownMenu>
							</Dropdown>
						</div>
						<div v-else class="btn-sty">
							<router-link to="/login" :title='$t("header.logo_text")' class="login-btn ff-regular">{{
								$t("header.logo_text")
							}}</router-link>
							<router-link to="/register" :title='$t("header.register_text")'
								class="register-btn ff-regular">{{
									$t("header.register_text")
								}}</router-link>
						</div>
					</div>
				</div>
			</div>
			<!-- 优惠券缩略图 -->
			<div class="coupon-notice" style="display: none;">
				<img src="@/assets/images/home/breviary_img.png" @click="jumpImg()" class="small-icon" alt="">
			</div>
		</div>
		<!-- 万圣节弹窗 -->
		<!-- <div class="wrapper-coupon" v-if="showCoupon">
			<div class="modal-wrap">
				<img src="@/assets/images/home/coupon_img.png" class="coupon-img" alt="" @click="toReceive">
				<Icon type="ios-close-circle-outline" @click="closeNotice()" class="close-icon" size="48" color="#ffffff" />
			</div>
		</div> -->
		<!-- 新用户进来显示优惠券弹窗 -->
		<div :class="`modal-wrap ${userLanguage.code == 'zh_CN' ? 'modal-wrap-bg-zh' : 'modal-wrap-bg-en'
			}`" v-if="showCoupon">
			<div class="content">
				<div :class="userLanguage.code == 'zh_CN' ? 'head-txt-zh' : 'head-txt-en'">
					{{ $t("personal.newUserCouponsPack") }}
				</div>
				<img class="close" src="@/assets/images/home/coupon_close_icon.png" alt=""
					@click="showCoupon = !showCoupon" />
				<div class="body">
					<div class="item" v-for="(el, index) in couponList" :key="index">
						<div class="head">
							<span class="label" v-if="el.type != 'ZKQ'">{{
								userInfo.currencySymbol
							}}</span>
							<span class="val">{{
								userLanguage.code == "en_US" && el.type == "ZKQ"
									? `${(el.discount || 0) * 10}%`
									: el.discount || 0
							}}</span>
							<span class="unit" v-if="el.type == 'ZKQ'">{{
								$t("personal.discount")
							}}</span>
							<span class="unit" v-else>{{ $t("personal.off") }}</span>
						</div>
						<div class="btn">
							{{ $t("personal.MinFreight") }}{{ userInfo.currencySymbol
							}}{{
								`${el.minPrice || 0} ${userLanguage.code == "zh_CN" ? $t("personal.required") : ""
								}`
							}}
						</div>
					</div>
					<div style="margin: auto" v-if="couponList && !couponList.length">
						<t-no-data></t-no-data>
					</div>
				</div>
				<div class="footer-btn" @click="toReceive">
					{{ $t("personal.getNow") }}
				</div>
			</div>
		</div>
		<!-- 用户订单入库48小时未建运单	,每天首次进站弹窗 -->
		<un-create-waybill ref="unWayBillRef"></un-create-waybill>
		<coupon-expired-pop ref="expiredRef" :userInfo="userInfo" :userLanguage="userLanguage"></coupon-expired-pop>
	</div>
</template>

<script>
import { eventBus } from '@/main'; // 引入全局事件总线
import { mapState } from "vuex";
// import { searchByUrl } from '@/common/search-helper'
import { editorMyInfo, logout, getUnReadCount, getMessageList, getWaitList, shipmentShipmentReminder } from "@/api/user";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import { Ball as vueBall } from "@hyhello/vue-ball";
import { homeCouponList, myCouponList } from "@/api/order";
import TNoData from "@/components/t-no-data";
import noticeCom from "./noticeCom.vue";
import searchCom from "../goods/components/searchCom.vue";
import UnCreateWaybill from './un-create-waybill.vue';
import HeadBannerCom from './head-banner-com.vue';
import { pointUser } from "@/common/point/api-hook";//打点日志
import CouponExpiredPop from './coupon-expired-pop.vue';
// import mallTopPicks from './mall-top-picks.vue';

dayjs.extend(utc);
dayjs.extend(timezone);

export default {
	name: "HeaderNav",
	components: { vueBall, TNoData, noticeCom, searchCom, UnCreateWaybill, HeadBannerCom, CouponExpiredPop },
	data() {
		return {
			homeElement: true,
			lastScrollTop: 0,
			active: "home",
			keyWords: "",
			timer: null,
			bjTime: "",
			heartBeat: false,
			showCoupon: false,
			couponList: null,
			label: (h) => {
				return h('div', [
					h('span', this.labelName),
					h('Badge', {
						props: {
							count: this.unReadNum
						},
						style: {
							marginLeft: '4px',
						},
					})
				])
			},
			pendParam: {
				messageType: 1
			},
			pagingParam: {
				messageType: 2,
				pageNum: 1,
				pageSize: 5
			},
			selectVis: false,
			messageInfo: [],
			noticeList: [],
			pendNum: 0,
			noticeNum: 0,
			newTimerId: null,
			tabActive: "tab1",
			pendData: {},
			unReadNum: 0,
			labelName: this.$t('home.pend_label'),
			infoText: this.$t('home.info_label'),
			scrollShow: false
		};
	},
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo,
			userReminder: (state) => state.user.userReminder,
			langList: (state) => {
				// 语言列表
				let list = [];
				if (state.config.config) {
					list = state.config.config.langList;
				}
				return list;
			},
			currencyList: (state) => {
				// 币种列表
				let list = [];
				if (state.config.config) {
					list = state.config.config.currencyList;
				}
				return list;
			},
			firstPageSwitchMap: (state) => {
				// 类目是否显示
				let obj = {};
				if (state.config.config) {
					obj = state.config.config.firstPageSwitchMap;
				}
				return obj;
			},
			userLanguage: (state) => state.user.userLanguage,
			userCurrency: (state) => state.user.userCurrency,
			cartBill: (state) => state.user.cartBill,
			cartNum: (state) => state.user.cartNum, // 购物车数量
		}),
	},
	created() {
		this.active = this.$route.name;
		this.getbjTime();
		this.getCouponList();
		eventBus.$on('loginSuccess', () => {
			this.getNum();
		})
		this.getCurrentRoute();
	},
	destroyed() {
		clearInterval(this.timer);
	},
	watch: {
		$route(to) {
			this.active = this.$route.name;
			this.homeElement = this.$route.path !== '/'; // 如果当前路由不是首页则展示元素
			if (this.$route.path !== '/') {
				this.scrollShow = true;
			} else {
				this.scrollShow = false;
			}
			// 首页、详情页、个人中心首页
			if (to.path == '/' || to.path == '/user/center' || to.path.includes('/product') || to.path.includes('//goods/details')) {
				this.getShipmentShipmentReminder();
			}
		},
		"cartBill.status"() {
			this.action(this.cartBill.cartEvent);
		},
		userInfo() {
			if (this.userInfo) {
				this.couponShow();
				this.getExpireCoupon();
			}
		},
	},
	mounted() {
		eventBus.$on('loginSuccess', () => {
			// 界面初始化时执行一次
			this.doOperation();
			const savedTimerId = localStorage.getItem('timerId');
			if (savedTimerId) {
				this.restoreTimer(savedTimerId);
			} else {
				// 如果没有保存的定时器，则创建新的定时器
				this.newTimerId = setInterval(() => {
					getWaitList().then((res) => {
						if (res.result) {
							this.pendData = res.result;
							this.$refs.notice.showNotice(this.pendData);
						}
					})
				}, 30 * 1000);
				localStorage.setItem('timerId', this.newTimerId);
			}
		});
		this.judgeMet();
		window.addEventListener('scroll', this.handleScroll);
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll);
	},
	methods: {
		// 获取以中午 12 点分割的当前“天”的标识
		getDayIdentifier() {
			const beijingTime = dayjs().tz('Asia/Shanghai');
			let currentDay = beijingTime.format('YYYY-MM-DD');
			if (beijingTime.hour() < 12) {
				// 如果当前时间在中午 12 点之前，使用前一天的日期
				currentDay = beijingTime.subtract(1, 'day').format('YYYY-MM-DD');
			}
			return currentDay;
		},
		getExpireCoupon() {
			const dayIdentifier = this.getDayIdentifier();
			const storageKey = `lastVisit_${this.userInfo.id}`;
			const lastVisitDay = localStorage.getItem(storageKey);

			if (lastVisitDay !== dayIdentifier) {
				myCouponList({ expd: 2 }).then((res) => {
					localStorage.setItem(storageKey, dayIdentifier);
					if (res.result && res.result.length > 0) {
						this.$refs.expiredRef.open(res.result);
					}
				})
			}
		},
		jumpShow() {
			pointUser('actions', '3003');
			this.$router.push('/shopWindow')
		},
		carMet() {
			pointUser('actions', '2005');
		},
		// 双11入口
		jumpUrl() {
			this.$router.push('/1111-of-2024')
		},
		judgeMet() {
			if (this.$route.path !== '/') {
				this.homeElement = this.$route.path !== '/';
				this.scrollShow = true;
			} else {
				this.handleScroll();
			}
		},
		handleScroll() {
			if (this.$route.path == '/') {
				const scrollTop = window.scrollY || document.documentElement.scrollTop;
				this.scrollShow = scrollTop > 150;
				this.homeElement = scrollTop > 150;
				this.lastScrollTop = scrollTop;
			} else {
				this.homeElement = true;
			}
		},
		closeNotice() {
			this.showCoupon = false;
		},
		jumpImg() {
			// window.open('https://discord.com/invite/t7xmAYwZhU', '_blank');
			window.open('https://discord.com/invite/H5fEeBCY3y', '_blank');
		},
		restoreTimer(timerId) {
			// 检查定时器是否仍然有效，如果有效则继续使用，否则创建新的定时器
			if (!this.isTimerValid(timerId)) {
				this.newTimerId = setInterval(() => {
					getWaitList().then((res) => {
						if (res.result) {
							this.pendData = res.result;
							this.$refs.notice.showNotice(this.pendData);
						}
					})
				}, 30 * 1000);
				localStorage.setItem('timerId', this.newTimerId);
			} else {
				this.doOperation();
				this.timerId = timerId;
			}
		},
		isTimerValid(timerId) {
			const timers = window.__timers__ || {};
			return timers[timerId] !== undefined;
		},
		// 未读条数
		getNum() {
			getUnReadCount().then((res) => {
				this.unReadNum = res.result;
			})
		},
		handleOpen(val) {
			if (val) {
				getMessageList(this.pendParam).then(res => {
					this.messageInfo = res.result.inboxMessages;
					this.pendNum = res.result.unReadCount;
					this.selectVis = val;
				})
				return;
			}
			this.selectVis = val;
		},
		disposeBtn(item) {
			// 1订单2仓库3运单
			if (item.messageType == 1) {
				this.selectVis = false;
				this.$router.push({
					name: 'order',
					params: {
						orderNo: item.orderNo
					}
				})
			} else if (item.messageType == 2) {
				this.selectVis = false;
				this.$router.push({
					name: 'warehouse',
					params: {
						orderNo: item.orderNo
					}
				})
			} else {
				this.selectVis = false;
				this.$router.push({
					name: 'shipment',
					params: {
						orderNo: item.receiverId
					}
				})
			}
		},
		changeTab(name) {
			if (name == "tab2") {
				this.getHandleList();
			}
		},
		getHandleList() {
			getMessageList(this.pagingParam).then(res => {
				this.noticeList = res.result.records;
				this.noticeNum = res.result.total;
			})
		},
		// 待处理弹窗
		doOperation() {
			getWaitList().then((res) => {
				if (res.result) {
					this.pendData = res.result;
					this.$refs.notice.showNotice(this.pendData);
				}
			}).catch
		},
		onPage(index) {
			this.pagingParam.pageNum = index;
			this.getHandleList();
		},
		toReceive() {
			this.showCoupon = false;
			this.$router.push(`/user/assets?${"from=name2"}`);
			// 万圣节的逻辑
			// window.open('https://discord.com/invite/t7xmAYwZhU', '_blank');
		},
		getCouponList() {
			homeCouponList()
				.then(({ result }) => {
					this.couponList = result || [];
				})
				.catch(() => {
					this.couponList = [];
				});
		},
		couponShow() {
			if (!localStorage.getItem(`${this.userInfo.userName}-showCouponWrap`)) {
				localStorage.setItem(`${this.userInfo.userName}-showCouponWrap`, true);
				this.showCoupon = true;
			}
		},
		transitioned() {
			// 加入购物车
			this.heartBeat = false;
		},
		action(ev) {
			this.$refs.ball.action(ev.target).then(() => {
				this.heartBeat = true;
			});
		},
		getbjTime() {
			this.timer = setInterval(() => {
				this.bjTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
			}, 1000);
		},
		onUserCurrency(info) {
			localStorage.setItem("user_currency", JSON.stringify(info));
			this.$store.commit("setUserCurrency", info);
			if (this.userInfo) {
				editorMyInfo({
					currencyCode: info.code,
				}).then(() => {
					window.location.replace(window.location.href);
				});
			} else {
				window.location.replace(window.location.href);
			}
		},
		onUserLang(info) {
			localStorage.setItem("user_language", JSON.stringify(info));
			this.$store.commit("setUserLanguage", info);
			if (this.userInfo) {
				editorMyInfo({
					lang: info.code,
				}).then(() => {
					window.location.replace(window.location.href);
				});
			} else {
				window.location.replace(window.location.href);
			}
		},
		onLogout() {
			pointUser('logout');
			logout().then(() => {
				this.$store.commit("resetUserInfo");
				this.$router.push("/");
			});
		},
		onSelect(name) {
			this.active = name;
		},
		toPage(name) {
			if (name == "logout") {
				this.onLogout();
			} else {
				this.$router.push(name);
			}
		},
		getCurrentRoute() {
			// 尝试获取当前路由路径，如果此时获取不到（比如页面刚刷新时），
			// 则会在后续的 watch 监听中更新该值
			// 首页、详情页、个人中心首页
			if (this.$route.path == '/' || this.$route.path == '/user/center' || this.$route.path.includes('/product') || this.$route.path.includes('//goods/details')) {
				this.getShipmentShipmentReminder();
			}
		},
		getShipmentShipmentReminder() {
			if (!this.userInfo) {
				return;
			}
			// 大于24小时再调用
			const currentTimestamp = Date.now();
			const fortyEightHoursInMillis = 24 * 60 * 60 * 1000;
			const getCloseTime = localStorage.getItem("isCloseTime");
			const getCloseId = localStorage.getItem('isCloseId');
			if (this.userInfo.id == getCloseId) {
				if (currentTimestamp - getCloseTime > fortyEightHoursInMillis) {
					shipmentShipmentReminder().then((res) => {
						if (res.result == true) {
							this.$refs.unWayBillRef.open();
						}
					})
				} else {
					console.log("24小时后弹")
				}
			}
		}
	},
};
</script>

<style lang="less" scoped>
/deep/ .mall-picks .ivu-poptip-body {
	padding: 0;
}

.ivu-collapse-simple {
	border-top: none;
}

.ivu-dropdown-item:hover {
	background: none;
}

.ivu-dropdown-menu {
	max-width: 470px;
}

.pos-sty {
	position: sticky;
	top: 0;
	z-index: 999;

	.header-nav {
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		text-align: left;
		font-style: normal;
		text-transform: none;

		.header {
			width: 100%;
		}

		.default-header {
			width: 100%;
			// height: 48px;
			position: relative;
			z-index: 999;
			background: rgba(0, 0, 0, 0.1);

			.default-nav {
				width: 100%;
				height: 100px;
				position: relative;
				z-index: 999;
				padding: 0 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

				.nav-left {
					display: flex;
					align-items: center;

					.logo-wrap {
						width: 150px;
						// height: 30px;

						img {
							width: 100%;
							// height: 100%;
						}
					}

					.nav-tabs {
						display: flex;
						margin-left: 36px;
						gap: 32px;

						.nav-item {
							// margin-right: 53px;
							font-weight: 500;
							font-size: 16px;
							// color: #222;
							color: #fff;
							line-height: 25px;
							font-style: normal;
							text-transform: none;
							cursor: pointer;

							&.nav-active {
								color: #eee71d;
							}
						}

						.hot-icon {
							width: 18px;
						}

						.other-column {
							position: absolute;
							top: 78px;

							:deep(.ivu-select-dropdown) {
								padding: 0;
							}

						}
					}
				}

				.nav-right {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.cart-wrap {
						position: relative;
						margin-left: 30px;

						.menu-logo {
							display: block;
							width: 24px;
							height: 24px;
							cursor: pointer;
						}

						.cart-num {
							position: absolute;
							right: -8px;
							top: -8px;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 18px;
							height: 18px;
							background: @error-color;
							border-radius: 50%;
							color: #ffffff;
							font-size: 12px;
							font-weight: 500;
							transform: scale(0.8);
						}
					}

					.other-column {
						margin-left: 32px;

						:deep(.ivu-select-dropdown) {
							padding: 0;
						}

					}

					.login {
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						color: #FF186B;
						font-size: 14px;
						font-weight: 500;
						white-space: nowrap;
						margin-left: 30px;
					}

					.uesr-info-img {
						position: relative;
						margin-left: 30px;

						.new-image {
							width: 26px;
							height: 40px;
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;

							img {
								display: block;
								width: 26px;
								height: 26px;
							}
						}

						.empty-sty {
							height: 300px;
							display: flex;
							justify-content: center;
							align-items: center;

							.empty-img {
								width: 50px;
								height: 50px;
							}
						}

						.pend-sty {
							height: 300px;
							overflow: auto;
							scrollbar-width: none;
							// overflow: hidden;


							.list-pend {
								height: 38px;
								display: flex;
								align-items: center;
								margin-top: 16px;

								.pend-img {
									width: 44px;
									height: 44px;
								}

								.info-content {
									height: 44px;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									margin-left: 14px;

									.info-title {
										color: #000000;
										font-size: 14px;
										font-weight: 600;
										line-height: 0;
									}

									.info-desc {
										width: 250px;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}

									.info-content {
										// width: 250px;
										word-wrap: break-word;
									}
								}

								.tackle-btn {
									color: #FF186B;
									font-size: 12px;
									font-style: normal;
									font-weight: 500;
									padding: 8px 10px;
									border: 0 solid #FF186B;
									background: #FFE5F0;
									border-radius: 18px;
									margin-left: 8px;
									line-height: 14px;
								}
							}

							.text-sty {
								margin-top: 12px;
								white-space: pre-wrap;
							}
						}
					}

					.btn-sty {
						margin-left: 24px;

						.login-btn {
							display: inline-block;
							padding: 8px 24px;
							// background-color: #FF186B;
							// border: 1px solid #FF186B;
							// border-radius: 4px;
							// color: #fff;
							font-size: 16px;
							margin-right: 8px;

							border: 1px solid #fff;
							border-radius: 40px;
							color: #fff;
							line-height: 22px;
							padding: 4px 12px;
						}

						.register-btn {
							display: inline-block;
							padding: 8px 24px;
							// border: 1px solid #FF186B;
							// border-radius: 4px;
							// color: #FF186B;
							font-size: 16px;
							// font-weight: 600;
							// background-color: rgba(255, 255, 255, 0.1);
							// backdrop-filter: blur(2px);

							border: 1px solid #fff;
							border-radius: 40px;
							color: #fff;
							line-height: 22px;
							padding: 4px 12px;
						}
					}
				}
			}
		}

		.coupon-notice {
			z-index: 2;

			.small-icon {
				width: 120px;
				height: 120px;
				cursor: pointer;
				position: fixed;
				bottom: 48px;
				left: 0;
				z-index: 1000;
				opacity: 0;
				animation: fadeInFromLeft 1s ease-in-out forwards;
			}

			@keyframes fadeInFromLeft {
				from {
					opacity: 0;
					transform: translateX(-100px);
				}

				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
		}

		.nav {
			width: 100%;
			height: 100px;
			z-index: 999;
			padding: 0 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

			.nav-left {
				display: flex;
				align-items: center;

				.logo-wrap {
					width: 150px;

					img {
						width: 100%;
					}
				}

				.nav-tabs {
					display: flex;
					margin-left: 36px;
					gap: 32px;

					.nav-item {
						// margin-right: 53px;
						font-weight: 500;
						font-size: 16px;
						color: #1E1714;
						line-height: 25px;
						text-align: left;
						font-style: normal;
						text-transform: none;
						cursor: pointer;

						&.nav-active {
							color: #FF186B;
						}
					}

					.nav-item:hover {
						color: #FF186B;
					}

					.hot-icon {
						width: 18px;
					}
				}
			}

			.nav-right {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex: 1;
				padding-left: 40px;

				.cart-wrap {
					position: relative;
					margin-left: 30px;

					.menu-logo {
						display: block;
						width: 24px;
						height: 24px;
						cursor: pointer;
					}

					.cart-num {
						position: absolute;
						right: -8px;
						top: -8px;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 18px;
						height: 18px;
						background: @error-color;
						border-radius: 50%;
						color: #ffffff;
						font-size: 12px;
						font-weight: 500;
						transform: scale(0.8);
					}
				}

				.other-column {
					margin-left: 32px;

					:deep(.ivu-select-dropdown) {
						padding: 0;
					}
				}

				.login {
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					color: #FF186B;
					font-size: 14px;
					font-weight: 500;
					white-space: nowrap;
					margin-left: 30px;
				}

				.uesr-info-img {
					position: relative;
					margin-left: 30px;

					.new-image {
						width: 26px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;

						img {
							display: block;
							width: 26px;
							height: 26px;
						}
					}

					.empty-sty {
						height: 300px;
						display: flex;
						justify-content: center;
						align-items: center;

						.empty-img {
							width: 50px;
							height: 50px;
						}
					}

					.pend-sty {
						height: 300px;
						overflow: auto;
						scrollbar-width: none;
						// overflow: hidden;


						.list-pend {
							height: 38px;
							display: flex;
							align-items: center;
							margin-top: 16px;

							.pend-img {
								width: 44px;
								height: 44px;
							}

							.info-content {
								height: 44px;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								margin-left: 14px;

								.info-title {
									color: #000000;
									font-size: 14px;
									font-weight: 600;
									// line-height: 0;
								}

								.info-desc {
									width: 250px;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.info-content {
									// width: 250px;
									word-wrap: break-word;
								}
							}

							.tackle-btn {
								color: #FF186B;
								font-size: 12px;
								font-style: normal;
								font-weight: 500;
								padding: 8px 10px;
								border: 0 solid #FF186B;
								background: #FFE5F0;
								border-radius: 18px;
								margin-left: 8px;
								line-height: 14px;
							}
						}

						.text-sty {
							margin-top: 12px;
							white-space: pre-wrap;
						}
					}
				}

				.btn-sty {
					margin-left: 24px;

					.login-btn {
						display: inline-block;
						padding: 8px 24px;
						background-color: #FF186B;
						border: 1px solid #FF186B;
						border-radius: 4px;
						color: #fff;
						font-size: 18px;
						margin-right: 8px;
					}

					.register-btn {
						display: inline-block;
						padding: 8px 24px;
						border: 1px solid #FF186B;
						border-radius: 4px;
						color: #FF186B;
						font-size: 18px;
						font-weight: 600;
						background-color: rgba(255, 255, 255, 0.5);
						backdrop-filter: blur(10px);
					}
				}
			}
		}
	}

	.wrapper-coupon {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		z-index: 1000;
		background-color: #13131361;

		.modal-wrap {
			background-size: cover;
			width: 600px;
			height: 713px;
			margin: 5% auto;
			z-index: 1000;

			.coupon-img {
				width: 600px;
				height: 713px;
			}

			.close-icon {
				display: block;
			}
		}
	}

	.modal-wrap-bg-zh {
		background: url(@/assets/images/home/coupon_bg_zh.png) no-repeat;
	}

	.modal-wrap-bg-en {
		background: url(@/assets/images/home/coupon_bg_en.png) no-repeat;
	}

	.modal-wrap {
		background-size: cover;
		width: 740px;
		height: 700px;
		position: fixed;
		right: 0;
		left: 0;
		margin: 0 auto;
		z-index: 1000;

		.content {
			position: relative;
		}

		.head-txt-zh {
			font-size: 20px;
			font-weight: 500;
			color: #fff;
			position: absolute;
			left: 190px;
			top: 60px;
			cursor: pointer;
		}

		.head-txt-en {
			width: 550px;
			font-size: 20px;
			font-weight: 500;
			color: #fff;
			position: absolute;
			left: 142px;
			top: 60px;
			cursor: pointer;
		}

		.close {
			width: 36px;
			height: 36px;
			position: absolute;
			right: 40px;
			top: 60px;
			cursor: pointer;
		}

		.body {
			overflow: auto;
			/* 开启滚动 */
			scrollbar-width: none;
			/* 对于 Firefox 隐藏滚动条 */
		}

		.body::-webkit-scrollbar {
			display: none;
			/* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
		}

		.body {
			margin-right: -20px;
			/* 根据需要调整值 */
			padding-right: 20px;
			/* 根据隐藏的 margin 调整 padding */
		}

		.body {
			overflow-y: scroll;
			padding: 16px 16px 0;
			height: 421px;
			width: 690px;
			position: absolute;
			left: 51px;
			top: 123px;
			display: flex;
			flex-wrap: wrap;

			.item:nth-child(3n + 1) {
				margin-right: 14px;
			}

			.item:nth-child(3n + 3) {
				margin-left: 14px;
			}

			.item {
				background: url(@/assets/images/home/pu_icon_coupon_bg.png) no-repeat;
				background-size: 100% 100%;
				padding: 12px;
				width: 200px;
				margin-bottom: 14px;

				.head {
					margin-bottom: 24px;
					color: #e76202;
					text-align: center;
					line-height: 20px;

					.label {
						font-size: 20px;
					}

					.val {
						font-size: 32px;
					}

					.unit {
						font-size: 14px;
					}
				}

				.btn {
					height: 27px;
					border-radius: 50px;
					background: #e76202;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					margin: auto;
				}
			}
		}

		.footer-btn {
			position: absolute;
			left: 280px;
			top: 570px;
			width: 202px;
			height: 47px;
			border-radius: 50px;
			background: linear-gradient(180deg, #fff1a3 0%, #fca64a 100%);
			color: #f9541c;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
	}

	.nav-item {
		height: 40px;
		display: flex;
		align-items: center;

		/deep/ .ivu-dropdown-rel {
			height: 40px;
			display: flex;
			align-items: center;
		}

		/deep/ .ivu-select-dropdown {
			width: 213px;
			box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.12);
			border-radius: 15px;
			padding: 10px 0;
		}
	}
}

.nav-language-dropdown {
	.language {
		font-size: 16px;
		color: #fff;
		cursor: pointer;
		user-select: none;
		display: flex;
		height: 40px;
		align-items: center;

		.lang-icon {
			margin-left: 4px;
			margin-top: 4px;
		}
	}



	/deep/ .ivu-select-dropdown {
		width: 280px;
		box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.12);
		border-radius: 15px;

		.select-list-wrap {
			display: flex;
			padding: 30px 20px;

			.select-list {
				width: 50%;
				padding-left: 10px;

				.select-list-item {
					margin-bottom: 20px;
					font-size: 14px;
					color: #1E1714;
					cursor: pointer;

					&.select-active,
					&:hover {
						color: rgba(255, 24, 107, 1);
					}

					&:last-child {
						margin-bottom: 0;
					}
				}

				&:last-child {
					padding-left: 30px;
					border-left: 1px solid rgba(241, 241, 241, 1);
				}
			}
		}
	}
}

.header {
	.nav-language-dropdown {
		.language {
			color: #1E1714;
		}
	}
}

.user-head-wrap {
	margin-left: 30px;

	.user-head {
		width: 48px;
		height: 48px;
		background: #ffdde9;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		.user-head-img {
			border-radius: 24px;
			width: 42px;
			height: 42px;
		}

		.image {
			cursor: pointer;
			display: block;
			width: 48px;
			height: 48px;
		}
	}

	/deep/.ivu-select-dropdown {
		margin-right: -30px;
		border-radius: 25px;
	}

	/deep/ .ivu-dropdown-menu {
		width: 340px;
	}

	.dropdown-item {
		color: @t-text-color;
		font-weight: 600;
		border-top: 1px solid #F1F1F1;
		padding: 16px 20px;
		color: #2F333A;

		.menu-item-content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.content {
				display: flex;
				align-items: center;

				.tag-num-text,
				.tag-num {
					margin-left: 10px;
					color: #FF186B;
				}

				.link {
					color: #2F333A;
				}
			}

			.right {
				display: flex;
				align-items: center;
			}

			.dot-red {
				display: block;
				width: 6px;
				height: 6px;
				background: #FF186B;
				border-radius: 50%;
				margin-right: 10px;
			}

		}
	}

	.dropdown-user {
		padding: 20px;

		.user-info {
			display: flex;
			align-items: center;
			height: 50px;
			margin-bottom: 15px;

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10px;
				display: block;
				border: 1px solid #F1F1F1;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.info {
				flex: 1;

				.name {
					color: #191919;
					font-family: Inter;
					font-size: 16px;
					font-style: normal;
					font-weight: 700;
					line-height: normal;
					margin-bottom: 8px;
				}

				.text {
					color: #969696;
					font-family: Inter;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}
		}

		.balance {
			border-radius: 15px;
			border: 1px solid #FFEDF3;
			background: linear-gradient(90deg, #FFF8FA 0%, #FFEDF3 100%);
			padding: 19px 20px;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.balance-left {
				.label {
					font-size: 14px;
					color: #191919;
				}

				.price {
					color: #FF186B;
					font-family: Inter;
					font-size: 15px;
					font-style: normal;
					font-weight: 700;
				}
			}
		}
	}
}
</style>
